﻿@model IEnumerable<CharacterModel.CharacterInfo>
           
@{
    ViewBag.Title = "Index";
}

<script language="javascript">
    var currentPageIndex = 0;
    var divCache = new Array();

    function forwardPage() {
        if ($('.ForwardNavigation').length == 0)
            return;

        currentPageIndex -= 3;
        setContent(currentPageIndex, 3);
    }

    function backPage() {
        if ($('.BackNavigation').length == 0)
            return;
        currentPageIndex += 3;
        setContent(currentPageIndex, 3);
    }

    function setContent(startIndex, count) {
        if (divCache[startIndex] != null)
            contentSetter(divCache[startIndex]);
        else
            getContent(startIndex, count, contentSetter);

        if (divCache[startIndex + 3] != null) {
            if (divCache[startIndex + 3].length == 0)
                $('.BackNavigation').attr('class', 'BackNavigationDisabled');
            else
                $('.BackNavigationDisabled').attr('class', 'BackNavigation');
        }
        else {
            getContent(startIndex + 3, count, function (divContent) {
                divCache[startIndex + 3] = divContent;
                if (divContent.length == 0) {
                    $('.BackNavigation').attr('class', 'BackNavigationDisabled');
                }
            });
        }

        if (currentPageIndex > 0)
            $('.ForwardNavigationDisabled').attr('class', 'ForwardNavigation');
        else
            $('.ForwardNavigation').attr('class', 'ForwardNavigationDisabled');
    }

    function contentSetter(divContent) {
        $('.ContentBorder').html('&nbsp;');
        for (var i = 0; i < divContent.length; i++)
            $('.ContentBorder').append(divContent[i]);
    }

    function getContent(startIndex, count, callback) {
        $.ajax({
            url: "GetImageList?startOffset=" + startIndex + "&count=" + count,
            success: function (data) {
                var newDivs = new Array();
                for (var i = 0; i < data.length; i++) {
                    var div = $("<div/>");
                    div.attr("style", "float: left;");
                    var imgDiv = $("<div/>");
                    imgDiv.attr('style', 'float:left');
                    var img = $("<img></img>");
                    img.attr('src', '../FaceDisplay/Display?faceIdentifier=' + data[i].FaceIdentifier + '&height=200&width=200');
                    imgDiv.append(img);
                    div.append(imgDiv);

                    newDivs[i] = div;

                    if (data[i].Character == null) {
                        var infoDiv = $("<div/>");
                        infoDiv.attr('style', 'float:left;margin:20px;');
                        infoDiv.html("I don't have a bio<br/><a href='../CharacterInfo/Create?portraitId=" + data[i].PortraitId + "'>Click to create one.</a>");
                        div.append(infoDiv);
                    }
                    else {
                        var infoDiv = $("<div/>");
                        infoDiv.attr('style', 'float:left;margin:20px;');
                        infoDiv.html(data[i].Character.FirstName + ' ' + data[i].Character.LastName + "<br/><a href='../CharacterInfo/Edit?characterInfoId=" + data[i].Character.Id + "'>Details...</a>");
                        div.append(infoDiv);
                    }
                }

                callback(newDivs);
            },
            error: function (error, status, errorThrown) {
                apprise(errorThrown);
            }
        });
    }

    $(function () {
        setContent(0, 3);
    });
</script>

    <div>
        <div class="SectionNavigation">
            <div class="SectionTabAll SectionTab"><a href="Create">Create a character</a></div>
            <div class="SectionTabAll SectionTabSelected">View Characters</div>
        </div>
        <div class="ContentBorder PreviewSection">&nbsp;</div>
        <div style="float: left">
            <span class="BackNavigation" onclick="backPage()">&nbsp;</span>
            <span class="ForwardNavigationDisabled" onclick="forwardPage()">&nbsp;</span>
        </div>

    </div>
